<template>
	<view class="chat-bar">
		<block v-if="userToken">
			<image class="chat-bar-face" :src="userInfo.avatar.file_path" mode="aspectFill"></image>
			<view class="chat-bar-text">
				<view class="chat-bar-name">
					<view class="chat-bar-name-text">{{ userInfo.nickName }}</view>
					<block v-if="IMEntity"><u-loading mode="flower" color="#ffffff" :size="loadingSize" v-if="IMEntity.socketStatus > -10 && IMEntity.socketStatus < 3"></u-loading></block>
				</view>
				<view class="chat-bar-desc">
					<view class="chat-bar-desc-light chat-bar-desc-light-online" v-if="chatStatusCode == 1"></view>
					<view class="chat-bar-desc-light chat-bar-desc-light-connecting" v-else-if="chatStatusCode == 0"></view>
					<view class="chat-bar-desc-light chat-bar-desc-light-offline" v-else></view>
					<view class="chat-bar-desc-text">
						<template v-if="chatStatusCode == 1">
							{{ deviceInfo.model }}
						</template>
						{{ chatStatusText }}
						<template v-if="chatStatusCode == 1">
							{{ deviceInfo.networkType ? ' - ' + deviceInfo.networkType : '' }}
						</template>
						<block v-if="IMEntity">
							<template v-if="IMEntity.socketStatus == -10">
								-
								<text class="reconnection" @tap.stop="reconnectSocket">重新连接服务器</text>
							</template>
							<template v-else-if="IMEntity.connectTime > 0 && IMEntity.socketStatus > -10 && IMEntity.socketStatus < 3">
								-尝试重连第{{ IMEntity.connectTime }}次
							</template>
						</block>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<image class="chat-bar-face" :src="userDefaultFace" mode="aspectFill" @tap.stop="toLogin"></image>
			<view class="chat-bar-text" @tap.stop="toLogin">
				<view class="chat-bar-name"><view class="chat-bar-name-text">请登录</view></view>
				<view class="chat-bar-desc"><view class="chat-bar-desc-text">登录后立即畅撩！</view></view>
			</view>
		</block>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState({
			deviceInfo: state => state.device,
			IMEntity: state => state.chat.IMEntity
		}),
		loadingSize: function() {
			return Tools.px2rpx(17);
		},
		chatStatusText: function() {
			//-99 未初始化 -2 ws断线 -1 ws失败 0 握手成功 1 正在连接 3 登录失败 99 登录成功
			let chatStatusText = '离线';
			if (this.IMEntity) {
				switch (this.IMEntity.socketStatus) {
					case 0:
						chatStatusText = '已连接服务器';
						break;
					case 1:
						chatStatusText = '正在登录';
						break;
					case 3:
						chatStatusText = '登录失败';
						break;
					case 99:
						chatStatusText = '在线';
						break;
					case -10:
						chatStatusText = '重连失败';
						break;
					default:
						chatStatusText = '离线';
						break;
				}
			}
			return chatStatusText;
		},
		chatStatusCode: function() {
			//-99 未初始化 -2 ws断线 -1 ws失败 0 握手成功 1 正在连接 3 登录失败 99 登录成功
			let chatStatusCode = -1;
			if (this.IMEntity) {
				switch (this.IMEntity.socketStatus) {
					case 0:
						chatStatusCode = 0;
						break;
					case 1:
						chatStatusCode = 0;
						break;
					case 99:
						chatStatusCode = 1;
						break;
					default:
						chatStatusCode = -1;
						break;
				}
			}

			return chatStatusCode;
		}
	},
	methods: {
		reconnectSocket() {
			this.IMEntity.reconnection(true);
		}
	}
};
</script>

<style scoped lang="scss">
.chat-bar {
	padding-left: 30rpx;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	.chat-bar-face {
		width: 34px;
		height: 34px;
		border-radius: 34px;
		display: block;
		flex: 0 0 34px;
		margin-right: 10px;
	}
	.chat-bar-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		height: 34px;
		.chat-bar-name {
			display: flex;
			align-items: center;
			height: 19px;
			&-text {
				font-size: 15px;
				color: #fff;
				margin-right: 8rpx;
			}
		}
		.chat-bar-desc {
			height: 12px;
			color: #fff;
			display: flex;
			align-items: center;
			font-weight: 400;
			.chat-bar-desc-light {
				height: 8px;
				width: 8px;
				border-radius: 10px;
				margin-right: 4px;
				&-online {
					background-image: linear-gradient(180deg, #79ed99 0%, #64d78b 100%);
				}
				&-connecting {
					background-image: linear-gradient(180deg, #c6d37f 0%, #f0b841 100%);
				}
				&-offline {
					background-image: linear-gradient(180deg, #c5c7d0 0%, #b0b3be 100%);
				}
			}
			.chat-bar-desc-text {
				font-size: 10px;
				.reconnection {
					color: #cdf0ff;
					text-decoration: underline;
				}
			}
		}
	}
}
</style>
